<template>
  <div style="height: 100%">
    <el-container style="height: 100vh">

      <el-aside :width="sideWidth+'px'" style="background-color: rgb(238, 241, 246); height: 100%">
       <Aside :isCollapse="isCollapse" :logoTextShow="logoTextShow" />
      </el-aside>

      <el-container>
        <el-header style="border-bottom: 1px solid #ccc;">
          <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse"/>
        </el-header>

        <el-main>
          <!--表示当前页面的子路由（children）会在router-view展示-->
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
  .headerBg{
    background: #cccccc !important;
  }
</style>

<script>
  import Aside from "../components/Aside";
  import Header from "../components/Header";

export default {
  name: 'HomeView',
  data() {

    return {
      collapseBtnClass: 'el-icon-s-fold',
      isCollapse: false,
      sideWidth: 200,
      logoTextShow: true

    }
  },
  components:{
    Aside,
    Header
  },
  methods: {
    collapse(){  //点击收缩按钮触发
      this.isCollapse=!this.isCollapse  //取反，把默认的false(收缩)变为ture
      if (this.isCollapse){  //收缩
        this.sideWidth=64
        this.collapseBtnClass='el-icon-s-unfold'
        this.logoTextShow=false
      }else {               //展开
        this.sideWidth=200
        this.collapseBtnClass='el-icon-s-fold'
        this.logoTextShow=true
      }
    }

  }
}
</script>

